<template>
<div>
	<el-scrollbar
	      wrapClass="scrollbar-wrap"
	      :style="{height: scrollHeight}"
	      ref="scrollbarContainer">
	<el-card >
			<div>
				<el-form>
					<div id="a1" v-if="tikuId">
						<el-form-item prop="courseId">
							选择课程：
							<el-select v-model="courseId" placeholder="请选择" @change="getZhishiList" clearable>
								<el-option v-for="bb in courses" :key="bb.id" :value="bb.id" :label="bb.name">
								</el-option>
							</el-select>

						</el-form-item>
						<el-form-item prop="zhishiId">
							选择知识点：
							<el-select v-model="zhishiId" :disabled="courseId?false:true" placeholder="请选择知识点">
								<el-option v-for="vv in zhishis" :key="vv.id" :value="vv.id" :label="vv.name">
								</el-option>
							</el-select>

						</el-form-item>
					</div>
					<div id="a1" v-if="tikuId">
						<el-form-item prop="type">
							题目类型：
							<el-select v-model="form.type" placeholder="请选择" @change="tiChange">
								<el-option v-for="qq in tixing" :key="qq.id" :value="qq.id" :label="qq.name">
								</el-option>
							</el-select>


						</el-form-item>
					</div>

					<div id="a3" v-if="form.type">
						<el-form-item prop="timu">
							输入题目：
							<!-- <el-input style="width: 80%;" type="textarea" v-model="form.timu"></el-input> -->
							<!--  新增时输入 -->
							<quill-editor v-model="form.timu" @blur="onEditorBlur($event)"
								@focus="onEditorFocus($event)" @change="onEditorChange($event)">
							</quill-editor>

						</el-form-item>
					</div>
				</el-form>
				<div id="a4">
					<el-button v-if="adda" class="filter-item" type="primary" icon="el-icon-plus" size="small" plain
						@click="handleAdd">
						添加
					</el-button>
					<el-table :data="xuanxiang" border style="width: 100%;">
						<el-table-column label="是否答案" width="120" align="center">
							<template slot-scope="scope">

								<el-checkbox v-model="scope.row.isRight">答案</el-checkbox>

							</template>

						</el-table-column>

						<el-table-column label="选项内容">
							<template slot-scope="scope">
								<el-input v-model="scope.row.xuanxiang" type="textarea" />
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="100px">
							<template slot-scope="scope">
								<el-button type="danger" icon="el-icon-delete" circle
									@click="removeItem(scope.$index)" />
							</template>
						</el-table-column>

					</el-table>
				</div>
			</div>
			<div style="padding: 20px;">
				<el-button @click="save">提交试题</el-button>
				<el-button @click="out()">退出</el-button>
			</div>
	
	</el-card>
	</el-scrollbar>
</div>
</template>

<script>
	import {
		quillEditor
	} from "vue-quill-editor"; //调用编辑器
	
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	/* import 'quill/dist/quill.bubble.css'; */
	import toolbarOptions from "../../components/toolbarOptions.js"
	export default {
		components: {
			quillEditor
		},
		data() {

			return {
				scrollHeight: '0px',
				courseId: '',
				courses: [],
				zhishis: [],
				adda: false,
				tikuId: '',
				form: {
					type: '',
					timu: '',
				},
				zhishiId: '',
				rules: {
					timu: [{
						required: true,
						message: '请输入题目！',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择题目类型！',
						trigger: 'blur'
					}],
					zhishiId: [{
						required: true,
						message: '请选择知识点类型！',
						trigger: 'blur'
					}],
				},
				xuanxiang: [],
				Shijuan: [],
				tixing: [{
						id: 1,
						name: '单选题'
					},
					{
						id: 2,
						name: '多选题'
					}, {
						id: 3,
						name: '判断题'
					},
				]
			}
		},
		mounted() {
			this.scrollHeight = window.innerHeight * 0.84 + 'px';
			let form = ''; // 请求后台返回的内容字符串
			this.str = this.escapeStringHTML(form);
		},
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quill;
			},
		},
		methods: {
			onEditorReady(editor) { // 准备编辑器

			},
			onEditorBlur() {}, // 失去焦点事件
			onEditorFocus() {}, // 获得焦点事件
			onEditorChange() {}, // 内容改变事件
			// 转码
			escapeStringHTML(str) {
				str = str.replace(/&lt;/g, '<');
				str = str.replace(/&gt;/g, '>');
				return str;
			},


			handleAdd() {

				this.xuanxiang.push({
					isRight: '',
					xuanxiang: ''
				})
			},
			removeItem(a) {
				this.xuanxiang.splice(a, 1)
			},
			clear() {

			},
			out() {
				this.$router.push('/teacher/stgl')
			},
			getCourse() {
				this.$ajax.post("/course/courselist", {}).then(res => {
					this.courses = res.data.data
				})
			},
			getZhishiList() {
				this.$ajax.post("/zhishi/findzhishi", {
					"courseId": this.courseId
				}).then(res => {
					this.zhishis = res.data.data
				})
			},
			tiChange(id) {

				if (id == 3) {
					this.xuanxiang = []
					this.adda = false
					var arr = new Array()
					arr.push({
						isRight: true,
						xuanxiang: '对'
					})
					arr.push({
						isRight: false,
						xuanxiang: '错'
					})

					this.xuanxiang = arr
				} else {
					this.xuanxiang = []
					this.adda = true
				}

			},
			save() {
				if (this.courseId == null || this.courseId == '') {
					this.$message.error('请选择课程！');
					return;
				}
				if (this.zhishiId == null || this.zhishiId == '') {
					this.$message.error('请选择知识点！');
					return;
				}
				if (this.form.type == null || this.form.type == '') {
					this.$message.error('请选择题目类型！');
					return;
				}
				if (this.form.timu == null || this.form.timu == '') {
					this.$message.error('请输入题目！');
					return;
				}

				for (var i = 0; i < this.xuanxiang.length; i++) {
					if (this.xuanxiang[i].xuanxiang == null || this.xuanxiang[i] == "") {
						this.$message.error('请填写选项内容！');
						return;
					}
				}
				if (this.form.type == 2) {
					var a = 0;
					for (var i = 0; i < this.xuanxiang.length; i++) {
						if (this.xuanxiang[i].isRight == true) {
							a++;
						}
					}
					if (a < 2) {
						this.$message({
							message: '答案至少为两个！',
							type: 'warning'
						});
						return;
					}
				} else {
					var a = 0;
					for (var i = 0; i < this.xuanxiang.length; i++) {
						if (this.xuanxiang[i].isRight == true) {
							a++;
						}
					}
					if (a != 1) {
						this.$message({
							message: '答案只能是一个！',
							type: 'warning'
						});
						return;
					}
				}


		
				if(window.sessionStorage.getItem("shiti")){
					
					var aa= JSON.parse(window.sessionStorage.getItem("shiti")) 
					this.$ajax.post("/tiku/saveQuestion", {
						"type": this.form.type,
						"timu": this.form.timu,
						"tikuId": this.tikuId,
						"zhishiId": this.zhishiId,
						"id":aa.id
					}).then(res => {
						if (res.data) {
							console.log(res.data);
							this.$ajax.post("/tiku/saveXuanXiang", {
								"list": JSON.stringify(this.xuanxiang),
								"quesId": res.data.data.id
							}).then(res => {
								if (res.data) {
									this.form = []
									this.xuanxiang = []
								}
							})
						}
					})
				}else{
					this.$ajax.post("/tiku/addQuestion", {
						"type": this.form.type,
						"timu": this.form.timu,
						"tikuId": this.tikuId,
						"zhishiId": this.zhishiId,
						"id":0
					}).then(res => {
						if (res.data) {
							console.log(res.data);
							this.$ajax.post("/tiku/saveXuanXiang", {
								"list": JSON.stringify(this.xuanxiang),
								"quesId": res.data.data.id
							}).then(res => {
								if (res.data) {
									this.form = []
									this.xuanxiang = []
								}
							})
						}
					})
				}
				this.out()
			},
			editaa() {
				if (window.sessionStorage.getItem("shiti")) {
					var aa = JSON.parse(window.sessionStorage.getItem("shiti"));
					console.log(aa);
					this.courseId = aa.zhishi.course.id
					this.getZhishiList()
					this.zhishiId = aa.zhishi.id;
					if (aa.type == "判断题") {
						this.form.type = 3;
					} else if (aa.type == "单选题") {
						this.form.type = 1;
					} else {
						this.form.type = 2;
					}

					this.form.timu = aa.timu;
					this.xuanxiang = aa.xuanxiang;
					if (this.form.type == "判断题") {
						this.adda = false
					} else {
						this.adda = true

					}
				}
			}
		},
		created() {
			this.tikuId = this.$route.query.tikuId
			this.getCourse()
			this.editaa()
		}
	}
</script>

<style>
	#a1 {
		margin: 20px;
	}

	#a2 {
		margin: 20px;
	}

	#a3 {
		margin: 20px;
	}
</style>
